<template>
  <el-dialog
    v-model="visible"
    title="选择商品"
    width="700px"
    :before-close="handleClose"
  >
    <section>
      <header>
        <el-input v-model="diaData.name" class="w-200 m-r-10" @change="getGoodsList2" placeholder="输入商品名称模糊搜索"></el-input>
        <el-select class="w-200" v-model="diaData.az" @change="fnAzChange">
          <el-option v-for="(item, index) in az_list" :key="index" :label="item?.available_zone_name" :value="item?.available_zone_id"></el-option>
        </el-select>
      </header>
      <el-table
        border
        :data="goodsList2"
        :max-height="400"
        :min-height="200"
        style="margin-top: 20px">
        <el-table-column
          prop="goods_id"
          label="商品ID"
          width="80"
        ></el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              type="primary"
              @click="FnChoose(scope.row)"
              v-if="goods.goods_id != scope.row.goods_id"
              >选择</el-button
            >
            <el-button type="success" disabled v-else>已选</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </el-dialog>
</template>

<script>
import { computed, reactive, ref, watch } from 'vue';
import bmsGoodsService from '@/service/eks/bmsgood.js'
import GoodsService from '@/service/eks/goods';

export default {
  props: {
    goods: {
      type: Object,
      default: () => {},
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false,
      required: true
    },
    type: {
      type: String,
      default: ''
    },
    az_id: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'update:goods', 'update:az_id'],

  setup(props, { emit }) {
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val)
      }
    })
    watch(() => visible.value, (newVal, oldVal) => {
      if (newVal) {
        getRegions().then(() => getAllGoods())
        
      }
    })

    const diaData = reactive({
      name: '',
      az: '',

    })
    const goodsList = ref([]);
    const goodsList2 = ref([])
    const getAllGoods = () => {
      let params = {
        site_id: diaData.az ? diaData.az : '',
        type: props.type
      }
      bmsGoodsService.getPlatGoods(params).then((res) => {
        if (res.code === 'Success') {
          goodsList.value = res.data ? res.data : [];
          getGoodsList2()
        }
      })
    }
    const az_list = ref([]);
    const getRegions = async () => {
      await GoodsService.getRegions().then(res => {
        if (res.code === 'Success') {
          let list = [];
          res.data.forEach(el => {
            if (el?.region_list) {
              el.region_list.forEach(item => {
                if (item?.available_zone_list) {
                  item.available_zone_list.forEach(item2 => {
                    list.push(item2)
                  })
                }
              })
            }
          });
          az_list.value = list;
          diaData.az = props.az_id ? props.az_id : az_list.value[0]?.available_zone_id;
        }
      })
    }
    const getGoodsList2 = () => {
      goodsList2.value = goodsList.value.filter(item => {
        return (`${item.goods_id}`?.includes(diaData.name) || item.goods_name.includes(diaData.name))
      })
    }
    const FnChoose = (row) => {
      emit('update:az_id', diaData.az)
      emit('update:goods', row);
      visible.value = false
    }
    const handleClose = () => {
      goodsList.value = []
      diaData.name = ''
      diaData.az = ''
      visible.value = false
    }
    const fnAzChange = (val) => {
      getAllGoods()
    }
    
    return {
      visible,
      handleClose,
      goodsList,
      goodsList2,
      FnChoose,
      diaData,
      getGoodsList2,
      getRegions,
      az_list,
      fnAzChange
    }
  }
}

</script>

<style lang="scss" scoped>
</style>